<template>
  <div
    class="author-container d-none d-xxl-flex"
    @click="$router.push('/sundry/flock')"
  >
    <svg
      t="1599210542874"
      class="upload-icon"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="16321"
      width="30"
      height="30"
    >
      <path
        d="M224.99 512a287.01 287.01 0 1 0 574.02 0 287.01 287.01 0 1 0-574.02 0z"
        fill="#FFDA33"
        p-id="16322"
      ></path>
      <path
        d="M659.18375 635.7275c5.61375-6.55875 3.74625-16.86375-2.82375-22.5-6.5475-5.61375-16.86375-3.735-22.48875 2.82375-33.75 37.485-70.30125 55.305-121.86 55.305-51.55875 0-84.375-14.0625-121.87125-55.305-5.625-6.57-15.94125-8.4375-22.5-2.82375-6.57 5.63625-8.4375 15.94125-2.8125 22.5 44.055 49.69125 85.30875 68.43375 147.18375 68.43375 61.86375 0 107.7975-22.48875 147.1725-68.43375zM390.15125 469.8125v-56.25c0-14.99625-12.18375-28.125-28.125-28.125-14.99625 0-28.11375 12.18375-28.11375 28.125v56.25c0 14.99625 12.1725 28.125 28.11375 28.125 14.99625 0 28.125-12.18375 28.125-28.125z m494.94375-59.0625c-42.1875-170.6175-193.10625-297.1575-373.08375-297.1575-179.98875 0-330.9075 126.54-373.10625 297.1575-45 16.875-76.87125 66.555-76.87125 124.68375 0 66.56625 42.1875 121.86 97.4925 130.30875 0 0 0 0.93375 0.945 0.93375h62.80875a339.87375 339.87375 0 0 1-39.375-159.3675c0-186.5475 147.18375-337.4775 328.10625-337.4775s328.08375 150.93 328.08375 337.4775c0 125.60625-66.54375 234.36-165.915 292.48875A54.9 54.9 0 0 0 661.0625 797.91875c-30.9375 0-56.25 25.30125-56.25 56.2275 0 30.94875 25.3125 56.26125 56.25 56.26125 30.92625 0 56.23875-25.3125 56.23875-56.26125 0-4.68-0.93375-9.36-1.87875-13.10625 64.6875-42.1875 117.18-103.12875 148.12875-175.2975 55.29375-9.39375 98.415-63.7425 98.415-130.30875 0-58.12875-32.81625-107.80875-76.87125-124.68375z m-194.985 59.0625v-56.25c0-14.99625-12.18375-28.125-28.11375-28.125-15.0075 0-28.125 12.18375-28.125 28.125v56.25c0 14.99625 12.18375 28.125 28.125 28.125 14.99625 0 28.11375-12.18375 28.11375-28.125z"
        fill="#515151"
        p-id="16323"
        data-spm-anchor-id="a313x.7781069.0.i0"
        class=""
      ></path>
    </svg>
    <span>联</span>
    <span>系</span>
    <span>我</span>
    <span>们</span>
  </div>
</template>

<script>
export default {
  name: "MyAuthor",
};
</script>

<style lang="less" scoped>
.author-container {
  display: flex;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  box-shadow: rgb(0 0 0 / 8%) 0px 5px 6px -4px,
    rgb(13 206 158 / 37%) 0px 6px 10px;
  overflow: hidden;
  padding: 12px 8px 12px 5px;
  border-radius: 0 14px 14px 0;
  transition: height 0.2s ease 0s, top 0.2s ease 0s, background 0.2s 0s;
  background: #0dce9e;
  cursor: url("@/assets/mouse/x2.cur"), auto !important;
  &:hover {
    background: #11dba9;
  }
  z-index: 10;
  position: fixed;
  /* 水平垂直居中 */
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  svg {
    animation: move 2s infinite;
  }
  span {
    color: #fff;
  }
}

@keyframes move {
  0%,
  100%,
  20%,
  50%,
  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transition-timing-function: cubic-bezier(0.755, 0.5, 0.855, 0.06);
    transform: translate3d(0, -10px, 0);
  }
  70% {
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -6px, 0);
  }
  90% {
    transform: translate3d(0, -3px, 0);
  }
}
</style>